
<div class="fui-page order-create-page fui-page-current" style="height:auto; bottom:0;padding-bottom:0;background:#000">
	<div id="carousel-container" class="carousel slide" data-role="carousel" data-param-auto="true" style="height:100vh;">
		<div class="carousel-inner" role="listbox" style="height: inherit; width: inherit;">{{pagedata.list}}
		<div ng-class="{'item':1,'active':$index==0}" ng-repeat="fan in pagedata.list" style="height:auto;width: 100%;">
			<img src="{{tomedia(fan.headImg) || '../core/resource/images/banner-1.jpg'}}" style="height:100vh; width: inherit;">
		</div>
		</div>
			<style>
					.fui-swipe-page .fui-swipe-bullet {background: {background}; opacity: {opacity};}
					.fui-swipe-page .fui-swipe-bullet.active {opacity: 1;}
			</style>
			<div id="carousel-jinyun" class="fui-swipe-page" style="padding: 0 5px; bottom: 20px; ">
				<div class="fui-swipe-bullet" ng-repeat="fan in pagedata.list" ng-class="{'active':$index==0}" data-target="#carousel-container" data-slide-to="{{$index}}"></div>
			</div>
	</div>
</div>
<script>
	require(['bootstrap', 'hammer', 'mpmansory'], function($, Hammer){
		$('#mpmansory').mpmansory({
			childrenClass: 'item',
			columnClasses: 'pic-water',
			breakpoints:{
						lg: 3, 
						md: 4, 
						sm: 6,
						xs: 6,
			},
			distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'asc' }, 
			onload: function (items) {
				//make somthing with items
			}
		});
		$('#carousel-container').carousel();
		var mc = new Hammer($('#carousel-container').get(0));
		mc.on("panleft", function(ev) {
			$('#carousel-container').carousel('next');
		});
		mc.on("panright", function(ev) {
			$('#carousel-container').carousel('prev');
		});
	});
</script>